<template>
  <div class="" id="about" v-if="show">
    <main class="page pricing-table-page">
      <section class="clean-block clean-pricing dark">
        <div class="container">
          <div class="block-heading">
            <h2 class="text-info">Pricing Table</h2>
            <p>旅游可以让我们走出日常的生活圈子，开阔眼界，丰富人生阅历.</p>
          </div>
          <div class="row justify-content-center">
            <div class="col-md-5 col-lg-4" v-for="task in tasks" :key="task.id">
              <div class="clean-pricing-item">
                <div class="heading">
                  <h3>建议</h3>
                </div>
                <p>旅游可以让我们走出日常的生活圈子，开阔眼界，丰富人生阅历.</p>
                <div class="price">
                  <h4>途游无极限</h4>
                </div>
                <!-- param参数 -->
                <router-link
                  :to="{ name: 'TaskDetail', params: { id: task.id } }"
                  class="btn btn-outline-primary d-block w-100"
                >
                  {{ task.name }}
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="page-footer dark">
      <div class="container">
        <div class="row">
          <div class="col-sm-3">
            <h5>了解一下</h5>
            <ul>
              <li><a href="#">首页</a></li>
              <li><a href="#">更多</a></li>
              <li><a href="#">更多</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <h5>我们</h5>
            <ul>
              <li><a href="#">联系方式</a></li>
              <li><a href="#">有关我们</a></li>
              <li><a href="#">其他</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <h5>更多</h5>
            <ul>
              <li><a href="#">更多</a></li>
              <li><a href="#">帮助</a></li>
              <li><a href="#">更多</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <h5>更多</h5>
            <ul>
              <li><a href="#">获取帮助</a></li>
              <li><a href="#">湖北</a></li>
              <li><a href="#">更多</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <p>© 2023 Copyright Text</p>
      </div>
    </footer>
    <!-- <h2>建议列表</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <router-link :to="{ name: 'TaskDetail', params: { id: task.id } }">
          {{ task.name }}
        </router-link>
      </li>
    </ul> -->
  </div>
</template>
  
  <script>
export default {
  name: "TaskList",
  data() {
    return {
      tasks: [
        { id: 1, name: "建议一", description: "建议一的描述" },
        { id: 2, name: "建议二", description: "建议二的描述" },
        { id: 3, name: "建议三", description: "建议三的描述" },
      ],
      show: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
    }, 1000);
  },
};
</script>
  